<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
 * {
        padding: 0;
        margin: 0;
    }

    body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        color: #666;
    }
    main{
        flex:1;
        background-color:aqua
    }
    footer{
        height: 50px;
        background: #ccc;
        display: flex;
        border-top: 1px solid #000;
    }
    section{
        border-right: 1px solid red;
        display: flex;
        flex:1;
        flex-direction: column-reverse;
    }
    /* section:hover>ul{
        display: block;
    } */
    section:last-child{
        border-right:none;
        
    }
    h4{
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        color: white;
    }
    ul{
        text-align: center;
        margin: 5px;
        border: 1px solid #666;
        border-radius: 5px;
        display: none;
    }
    li{
        list-style: none;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }
    li:last-child{
        border-bottom:none
    }
	
</style>
<body>
    <main></main>
<footer>
    <section>
        <h4>教程</h4>
        <ul>
            <li>PHP1</li>
            <li>LINUx1</li>
        </ul>
    </section>
    <section>
        <h4>直播</h4>
        <ul>
            <li>PHP2</li>
            <li>LINUx2</li>
        </ul>
    </section>
    <section>
        <h4>软件</h4>
        <ul>
            <li>PHP3</li>
            <li>LINUx3</li>
        </ul>
    </section>
</footer>
 
</body>
<script>
    const domsection=document.querySelectorAll("h4")
    domsection.forEach(item=>{
        item.onclick=function(){
            domsection.forEach(v=>{
                if(item!==v){
                    v.nextSibling.nextSibling.style.display="none"
                }
            })
            const showhide=getComputedStyle(item.nextSibling.nextSibling,null)
            console.log(item.nextSibling.nextSibling,item.nextSibling.nextSibling.style.display,showhide.display,789000);
            if(showhide.display=="none"){
                item.nextSibling.nextSibling.style.display="block"
            }else{
                item.nextSibling.nextSibling.style.display="none"
            }  
        }
    })
    
</script>
</html>
